<template>
    <div class="list" ref='wrapper'>
         <div>
        <div class="conment">
            <!-- <div>当前城市</div> -->
            <p>{{this.$store.state.city}}</p>
            <!-- <p>热门城市</p> -->
            <div>
                <button  @click='change'>北京</button>
                <button  @click='change'>郑州</button>
                <button  @click='change'>上海</button>
                <button  @click='change'>天津</button>
            </div>
            <div>城市列表</div>
            <div class="box">
                <div class="box-char" v-for="(items, index) in citys.keys" :key="index">{{items}}</div>
            </div>
        </div>
        <div class="city-list">
            <div class="area" v-for="(item, index) in citys.keys" :key="index" :ref='item'>
                <div class="title border-topbottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item}}</div>
                <div class="item-list">
                    <div  @click='ss'  class="item border-bottom" v-for="(val, ke) in citys.citys[item]" :key="ke">{{val}}</div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
   props: {
            'citys': Object,
            'letter': String
        },
    watch: {
            letter() {
                if (this.letter) {
                    const el = this.$refs[this.letter][0]
                    this.scroll.scrollToElement(el)
                }
            }
        },
    mounted(){
        this.scroll= new Bscroll(this.$refs.wrapper,{
            click: true,
            scrollY: true,
            pullUpLoad: {
                threshold: -30
            },
            pullDownRefresh: {
                threshold: 30,
                stop: 200
            }
        })  
    },
    methods:{
        change(e){
            // this.$store.state.city = e.target.innerText
           this.$store.dispatch('cCity',e.target.innerText)
            this.$router.push('/')//编程式导航
            // console.log(this.$store.state.city)
            // console.log(1)
        },
        ss(es){
            this.$store.dispatch('cCity',es.target.innerText)
            console.log(es.target.innerText,)
             this.$router.push('/city')
            
        }
    }
}
</script>
<style lang="stylus" scoped>
.border-bottom
    &:before
      background-color #ccc
    &:after
      background-color #ccc
  .wrapper
    width 100%
  .list
    overflow hidden
    position absolute
    top 1rem
    left 0
    bottom 0
    right 0

    .item-list
      line-height 1.2rem
      padding-left .5rem
    .title
      line-height .44rem
      background-color #eee
      padding-left .2rem
      color #666
      font-size .26rem
    .conment
      width 100%
      .box
        display flex
        flex-wrap: wrap;
        padding .1rem .6rem .1rem .1rem
        .box-char
          width 25%
          height 0
          box-sizing border-box
          border 1px solid #fff
          padding-bottom .86rem
          text-align center
          line-height .86rem
          background-color #fff
          color #000
          border 1px solid #f00
    .p-city
      border 1px solid red
</style>



